import React from "react";
import { Col, Row, Statistic, Tabs, Table } from "antd";
import { ArrowUpOutlined } from "@ant-design/icons";
import { useGlobalStore } from "@/store/global";
import { columns, data } from "./components/table";
import { useShallow } from "zustand/react/shallow";
import { pieOptionsFn } from "./options/proportionOptions";
import { trendOptionsFn } from "./options/trendOptions";
import { overviewTabs, overviewOptionsFn } from "./options/overviewOptions";
import ECharts from "@/components/Echarts";
import CountUp from "react-countup";

const Analysis: React.FC = () => {
  const { isDark } = useGlobalStore(useShallow((state) => ({ isDark: state.isDark })));

  return (
    <Row gutter={[15, 15]} className="p-[8px_5px]">
      {/* 分析计数 */}
      <Col span={24}>
        <Row gutter={[20, 20]}>
          <Col xxl={6} xl={12} lg={12} md={24} sm={24} xs={24}>
            <div className="bg-[linear-gradient(90deg,_#31c5de_0%,_#4776f7_100%)] flex justify-between items-center h-[160px] p-[20px_28px] overflow-x-hidden cursor-pointer border-none rounded-[20px] transition-[all_.3s_ease] hover:shadow-[var(--el-color-boxShadowAnalysis)] hover:transform-[translateY(-4px)_scale(1.01)]">
              <Statistic
                className="[&_.ant-statistic-title]:text-[18px]! [&_.ant-statistic-title]:text-[#ffffff]! [&_.ant-statistic-content]:text-[32px]! [&_.ant-statistic-content]:font-bold! [&_.ant-statistic-content]:text-[#ffffff]!"
                title="新注册用户"
                value={132893}
                formatter={(value: number | string) => <CountUp end={Number(value)} duration={2} separator="," />}
              />
              <div className="flex flex-col items-end">
                <ECharts className="w-[150px] h-[60px]" option={trendOptionsFn([50, 40, 60, 20, 40, 30, 80, 70, 120, 60, 80, 50])} />
                <Statistic
                  className="[&_.ant-statistic-content]:text-[16px]! [&_.ant-statistic-content]:text-[#ffffff]! [&_.ant-statistic-content_.ant-statistic-content-prefix]:text-[20px]!"
                  value={14.52}
                  prefix={<ArrowUpOutlined />}
                  suffix="%"
                />
              </div>
            </div>
          </Col>
          <Col xxl={6} xl={12} lg={12} md={24} sm={24} xs={24}>
            <div className="bg-[linear-gradient(90deg,_#fa9797_0%,_#ff75b2_100%)] flex justify-between items-center h-[160px] p-[20px_28px] overflow-x-hidden cursor-pointer border-none rounded-[20px] transition-[all_.3s_ease] hover:shadow-[var(--el-color-boxShadowAnalysis)] hover:transform-[translateY(-4px)_scale(1.01)]">
              <Statistic
                className="[&_.ant-statistic-title]:text-[18px]! [&_.ant-statistic-title]:text-[#ffffff]! [&_.ant-statistic-content]:text-[32px]! [&_.ant-statistic-content]:font-bold! [&_.ant-statistic-content]:text-[#ffffff]!"
                title="在线用户"
                value={219456}
                formatter={(value: number | string) => <CountUp end={Number(value)} duration={2} separator="," />}
              />
              <div className="flex flex-col items-end">
                <ECharts className="w-full h-full" option={trendOptionsFn([10, 50, 40, 100, 50, 120, 35, 40, 15, 80, 10, 20])} />
                <Statistic
                  className="[&_.ant-statistic-content]:text-[16px]! [&_.ant-statistic-content]:text-[#ffffff]! [&_.ant-statistic-content_.ant-statistic-content-prefix]:text-[20px]!"
                  value={58.36}
                  prefix={<ArrowUpOutlined />}
                  suffix="%"
                />
              </div>
            </div>
          </Col>
          <Col xxl={6} xl={12} lg={12} md={24} sm={24} xs={24}>
            <div className="bg-[linear-gradient(90deg,_#3dd3b2_0%,_#10a0e6_100%)] flex justify-between items-center h-[160px] p-[20px_28px] overflow-x-hidden cursor-pointer border-none rounded-[20px] transition-[all_.3s_ease] hover:shadow-[var(--el-color-boxShadowAnalysis)] hover:transform-[translateY(-4px)_scale(1.01)]">
              <Statistic
                className="[&_.ant-statistic-title]:text-[18px]! [&_.ant-statistic-title]:text-[#ffffff]! [&_.ant-statistic-content]:text-[32px]! [&_.ant-statistic-content]:font-bold! [&_.ant-statistic-content]:text-[#ffffff]!"
                title="总利润"
                value={854972}
                formatter={(value: number | string) => <CountUp end={Number(value)} duration={2} separator="," />}
              />
              <div className="flex flex-col items-end">
                <ECharts className="w-[150px] h-[60px]" option={trendOptionsFn([30, 10, 40, 70, 40, 60, 20, 110, 40, 80, 40, 10])} />
                <Statistic
                  className="[&_.ant-statistic-content]:text-[16px]! [&_.ant-statistic-content]:text-[#ffffff]! [&_.ant-statistic-content_.ant-statistic-content-prefix]:text-[20px]!"
                  value={36.28}
                  prefix={<ArrowUpOutlined />}
                  suffix="%"
                />
              </div>
            </div>
          </Col>
          <Col xxl={6} xl={12} lg={12} md={24} sm={24} xs={24}>
            <div className="bg-[linear-gradient(90deg,_#ea83f7_0%,_#7773f3_100%)] flex justify-between items-center h-[160px] p-[20px_28px] overflow-x-hidden cursor-pointer border-none rounded-[20px] transition-[all_.3s_ease] hover:shadow-[var(--el-color-boxShadowAnalysis)] hover:transform-[translateY(-4px)_scale(1.01)]">
              <Statistic
                className="[&_.ant-statistic-title]:text-[18px]! [&_.ant-statistic-title]:text-[#ffffff]! [&_.ant-statistic-content]:text-[32px]! [&_.ant-statistic-content]:font-bold! [&_.ant-statistic-content]:text-[#ffffff]!"
                title="销售额"
                value={654932}
                formatter={(value: number | string) => <CountUp end={Number(value)} duration={2} separator="," />}
              />
              <div className="flex flex-col items-end">
                <ECharts className="w-[150px] h-[60px]" option={trendOptionsFn([25, 70, 50, 80, 120, 60, 90, 30, 45, 20, 90, 40])} />
                <Statistic
                  className="[&_.ant-statistic-content]:text-[16px]! [&_.ant-statistic-content]:text-[#ffffff]! [&_.ant-statistic-content_.ant-statistic-content-prefix]:text-[20px]!"
                  value={24.35}
                  prefix={<ArrowUpOutlined />}
                  suffix="%"
                />
              </div>
            </div>
          </Col>
        </Row>
      </Col>

      {/* 分析概述 */}
      <Col span={24}>
        <Row gutter={[15, 15]}>
          <Col xl={24} lg={24} md={24} sm={24} xs={24}>
            <div className="containerCard h-[500px] flex flex-col p-[0]">
              <div className="p-[15px_38px_0] flex justify-between">
                <span className="mt-[6px] text-[23px] text-[var(---el-color-colorTextSecondaryHeader)]">产品销售概览</span>
                <div className="[&_.ant-tabs-tab]:p-[12px_0_10px]! [&_.ant-tabs-tab]:text-[16px]! [&_.ant-tabs-nav]:before:border-none!">
                  <Tabs defaultActiveKey="1" size="middle" items={overviewTabs} />
                </div>
              </div>
              <ECharts className="w-full h-[440px]" option={overviewOptionsFn(isDark)} />
            </div>
          </Col>
        </Row>
      </Col>

      {/* 分析记录 */}
      <Col span={24}>
        <Row gutter={[15, 15]}>
          <Col xl={16} lg={24} md={24} sm={24} xs={24}>
            <div className="containerCard w-full h-[440px] flex">
              <Table columns={columns} dataSource={data} pagination={false} size="middle" />
            </div>
          </Col>
          <Col xl={8} lg={24} md={24} sm={24} xs={24}>
            <div className="containerCard w-full h-[440px]">
              <ECharts className="w-full h-[340px]" option={pieOptionsFn(isDark)} />
            </div>
          </Col>
        </Row>
      </Col>
    </Row>
  );
};

export default Analysis;
